<template>
  <div style="position: relative;" class="code">
      <router-link to="/register">
        <van-nav-bar fixed title="登录" right-text="注册" class="navLogin"></van-nav-bar>
      </router-link>
      <img src="http://www.zlllcy.com/fuben/f7.png" alt="" class="topimg">

      <div class="login">
        <van-cell-group>
          <div style="display:flex" class="phone">
            <van-icon name="manager" color="gray" size="1.2rem" class="img"/>
            <van-field v-model="phone" :border="true"  label="手机号" placeholder="请输入您的手机号" />
          </div>

          <div class="codepwd">
            <van-icon name="lock" color="gray" size="1.2rem" class="img1"/>
            <van-field
              v-model="sms"
              center
              clearable
              :border="false"
              label="验证码"
              placeholder="请输入验证码"
            >
            <template #button>
              <van-button @click="gainCode" class="validation" :disabled=disabled size="small" type="warning">{{time}}</van-button>
            </template>
            </van-field>
          </div>
        </van-cell-group>

        <van-button :disabled="checked==false"  @click="checkLogin" size="large" class="btnlog">立即登录</van-button> 
        <div>
          <router-link to="/login">
            <a href="javascript:;" class="phonelogin">账号密码登录</a>
          </router-link>
        </div>
        <van-checkbox v-model="checked" shape="square" class="checkbox">同意 <a href="javascript:;">《隐私权政策》</a></van-checkbox>
    </div>

  </div>
</template>

<script>
export default {
 data() {
    return {
      isClick:true,
      phone:'',  
      time:'发送验证码',
      sms:'',  //用于验证码做双向数据绑定
      disabled:false,
      checked:false,
      code:'' //用于保存后端传过来的验证码
    };
  },
  methods:{
    // 获取验证码
      gainCode(){
        //正则表达式验证手机号
        let reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if (reg.test(this.phone)) {
          let s = 60
          // this.time = s + 's'
          let interval = setInterval(() => {
            s--
            this.time = s + 's'
            this.disabled=true;
            if (s < 0) {
              this.time = '重新获取'
              this.isClick = true
              clearInterval(interval)
              this.disabled=false 
            }   
          }, 1000)
        } else {
           this.$toast ('输入正确的手机号');
           return;
        }
        // 发送获取验证码请求
        this.axios.post('/user/sms',`phone=${this.phone}`).then(result=>{
          // console.log(result.data);//返回验证码
          this.code = result.data; //保存后端返回的验证码
        })
      },
        //注册表单验证
      checkLogin(){
          // 判断手机号是否为空
            if(this.phone ==''){
             this.$toast ('手机号不能为空！');
             return;
            }
          
            //判断用户输入的验证码跟获取到的验证码是否一致或者是否为空
            if(this.sms != this.code || this.sms == ''){
              this.$toast ('验证码为空或输入不正确！');
               return;
            }

          //console.log('注册成功！');
          // 发送post请求，传递参数：phone upwd sms
          //  console.log(this.phone,this.sms);
           this.axios.post('/user/codelogin',`phone=${this.phone}&sms=${this.sms}`)
          .then(res=>{
            // console.log(res);
            this.uid = res.data.result[0].uid;
            if(res.data.code==200){ //登录成功
                //登录成功之后生成随机数
                let token= "";
                token = Math.random().toString().slice(-15)
                sessionStorage.setItem('token',token);
                // 当登录成功后，调用VueX里面mutations下的loginOk方法，修改登录状态，并渲染页面
                this.$store.commit('loginOK',this.uid);
                // 把islogin和uid存到sessionStorage
                sessionStorage.setItem('islogin',true);
                sessionStorage.setItem('uid',this.uid);
                sessionStorage.setItem('phone',this.phone);
                // console.log(this.uid);
                this.$toast('登录成功');
                this.$router.push('/');
            }else if(res.data.code==201){ 
               this.$toast('登录失败')
            }
          })
        }  
  }
}
</script>

<style lang="scss" scoped>
@import "@/scss/public.scss";
.topimg{
      margin-top: 50px;
}
.code{
// nav"注册样式"
// .van-nav-bar__text {
//   color: $colorFontWhite !important;
// }
.login {
  position: relative;
  padding-top: 15px;
  box-sizing: border-box;
  .codepwd,
  .phone {
    display: flex;
    padding-left: .625rem;
  }
  top: 5rem !important;
  left: 0.8rem !important;
  text-align: center;
  width: 90%;
  background-color: $colorFontWhite;
}
.img {
  position: absolute;
  top: 0.3rem;
  left: .25rem;
  margin-top: 0.3rem !important;
  margin-left: 0.1rem;
  font-size: 0.8rem !important;
}
.img1 {
  position: absolute;
  top: 2.3rem;
  // right: 0rem;
  margin-top: 0.3rem !important;
  margin-left: -0.28rem;
  font-size: 0.8rem !important;
}
  .phonelogin{
    margin-right: 8.4rem;
    font-size: 12px;
  }
.eye {
  position: absolute;
  top: 10px;
  margin-top: 0.3rem !important;
  margin-left: 0.1rem;
  font-size: 1rem !important;
}
.btnlog{
  margin-top: 1rem;
  background-color: #4198ff;
}
  img{
    width: 100%;
  }
  // .van-nav-bar__title{
  //   color: $colorFontWhite !important;
  // }
  .van-nav-bar{
    background-color: white !important;
  }
  .pwd{
    display:flex;
  }
  .phonelogin{
    color: $colorFontOrg;
  }
 .van-button  {
      border-radius: 10% !important;
  }
  .van-button--large{
    width: 80% !important;
    height: 35px !important;
    border-radius: 5px !important;
    color: white !important;
    // margin-top: 5% !important;
  }
 // 复选框样式
   .van-checkbox__icon{
     margin-bottom: 1rem; 
     font-size: $fontSize14 !important;
     margin-top:17px;
   }
  // "同意"样式
   .van-checkbox__label {
     font-size: 12px;
     margin-bottom: 0.2rem !important;

   }
  .checkbox{
     margin-top: 6%;
     margin-left: 30%;
     border-radius: .3125rem;
  }
  .van-cell{
    margin-left: 10px !important;
  }
  
  .van-field__label{
      width: 3.2em !important;
  }
  .agree{
    margin-top: 0.6rem !important;
    font-size: 0.2rem !important;
    margin-left: 0.2rem;
  }
  .login{
    position: absolute;
    top: 7.4rem !important;
    left: 0.5rem;
    width: 90%;
    background-color: $colorWhite;
    border-radius: .3125rem;
  }
  a{
    color: $colorFontOrg;
  }
  .validation{
    color: #fff;
    background-color: #a0ccff;
    border: 1px solid #a0ccff;
  }
 }
</style>